<template>
  <div>
        <!-- start:自定义页面内容 -->
    <el-dialog title="请扫描院内二维码" width="80%" :visible.sync="showWaitingModal"
    :before-close="handleClose" >
       <el-row style="padding:0" :gutter="20">
        <el-col :span="12">
          <el-card :body-style="{ padding:'0px' }">
            <img style="width:100%;display:block;" :src="readingUrl" class="image" />
          </el-card>
        </el-col>
        <el-col :span="12" style="display:flex;align-items:center;">
          <el-input ref="autofocus" v-model="cardNo" autocomplete="off" @change="ReadedCard()">
            <template slot="prepend">院内二维码:</template>
          </el-input>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
        <!-- end:自定义页面内容 -->
  </div>
</template>

<script>
// import readingDzjkk from "@images/readcard/reading04.png";//集安
import readingDzjkk from "@images/readcard/reading01.png";
export default {
  name: "Ynewm",
  data() {
    return {
      cardNo: "",
      showWaitingModal: true,
     readingUrl:this.loginUrl,
    };
  },
    props:{
    loginUrl:String,
  },
  methods: {
      ReadedCard() {
				this.$emit('ReadedCard',  this.cardNo.replace(/\s+/g,""));
      },
         handleClose() {
        this.$confirm('确认取消读卡?')
          .then(_ => {
           this.$router.push({ name: "home" });
          })
          .catch(_ => {
            this.$nextTick(function() {
            this.$refs.autofocus.focus()
        });
          });
      },
      },
  mounted(){
    console.log("hahaha")
    this.$nextTick(function() {
      this.$refs.autofocus.focus()
    });
  }
};
</script>

<style scoped>

</style>
